//1.找元素
//form表单
let register = document.querySelector('.register')
//用户名
let username = document.querySelector('#userName')
username.onblur = validUsername
//密码
let password = document.querySelector('#password')
password.onblur = validPass
//真实姓名
let realName = document.querySelector('#realName')
realName.onblur = validRealname
//性别
let gender = document.querySelectorAll('.gender')
gender[0].onclick = validGender
gender[1].onclick = validGender
//爱好
let hobby = document.querySelectorAll('[type=checkbox]')
for (let i = 0; i < hobby.length; i++) {
    //onclick回调函数返回false时，无法修改checked状态，建议使用change事件
    hobby[i].onchange = validHobby
}
//生日
let birthday = document.querySelector('#birthday')
birthday.onblur = validBirthday
//电话
let phone = document.querySelector('#phone')
phone.onblur = validPhone
//邮箱
let email = document.querySelector('#email')
email.onblur = validEmail
//创建验证码图片
let verifyCode = new GVerify('random')
let reRandom = document.querySelector('#reRandom')
reRandom.onblur = validCode
//头像
let pic = document.querySelector('#pic')
pic.onchange = validPic

//评价
let resume = document.querySelector('#resume')
resume.onblur = validEvaluate
//ID
//let identityNo = document.querySelector('#identityNo')
//identityNo.onchange = validID






register.onsubmit = function () {
    let flag = validUsername() & validPass() & validRealname() & validGender() & validHobby() & validBirthday() & validPhone() & validEmail() & validCode() & validPic() & validEvaluate()&validID()

    return flag > 0
}

//2.验证用户名要么都是汉字2-16 要么都是英文2-30 非空 唯一
function validUsername() {
    let v = username.value
    let span = username.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '用户名不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /(^[\u4e00-\u9fa5]{2,16}$)|(^[a-zA-Z]{2,30}$)/
    if (!reg.test(v)) {
        span.innerHTML = '用户名汉字2-16，英文2-30位'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '用户名正确'
    span.style.color = 'green'
    return true
}

//3.验证密码：6-12位 非空，必须包含大写字符，字母开头
function validPass() {
    let v = password.value
    let span = password.nextElementSibling
    if (!v || v.trim() === '') {
        span.innerHTML = '密码不能为空'
        span.style.color = 'red'
        return false
    }
    if (v.length > 12 || v.length < 6) {
        span.innerHTML = '密码长度6-12位'
        span.style.color = 'red'
        return false
    }
    let reg = /^[a-zA-Z]$/
    if (!reg.test(v[0])) {
        span.innerHTML = '密码首位必须是字母'
        span.style.color = 'red'
        return false
    }
    let reg1 = /[A-Z]/g
    let res = v.match(reg1)
    //match匹配返回一个字符串数组，找不到返回null
    if (res === null) {
        span.innerHTML = '密码必须保含大写字母'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '密码正确'
    span.style.color = 'green'
    return true
}

//4.验证真实姓名 要么都是汉字2-16 要么都是英文2-30 非空 唯一
function validRealname() {
    let v = realName.value
    let span = realName.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '真实姓名不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /(^[\u4e00-\u9fa5]{2,16}$)|(^[a-zA-Z]{2,30}$)/
    if (reg.test(v) === false) {
        span.innerHTML = '真实姓名汉字2-16，英文2-30位'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '真实姓名正确'
    span.style.color = 'green'
    return true
}

//5.验证性别 至少选一个
function validGender() {
    //三元运算符  第一个条件为true 则执行冒号左边 否则执行冒号右边
    let v = gender[0].checked ? gender[0].value : gender[1].value
    let span = gender[1].nextElementSibling
    span.innerHTML = ''
    if (!v) {
        span.innerHTML = '性别必须选中一个'
        return false
    }
    span.innerHTML = '性别正确'
    span.style.color = 'green'
    return true
}

//6.验证爱好 必须选中一个
function validHobby() {
    let span = document.querySelector('#afterHobby')
    span.innerHTML = ''
    for (let i = 0; i < hobby.length; i++) {
        if (hobby[i].checked) {
            span.innerHTML = '爱好正确'
            span.style.color = 'green'
            return true
        }
    }
    span.innerHTML = '爱好必须选中一个'
    span.style.color = 'red'
    return false
}

//生日 验证非空  时间点不能超过系统时间
function validBirthday() {
    let v = birthday.value
    let span = birthday.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '生日不能为空'
        span.style.color = 'red'
        return false
    }
    let birth = +new Date(v)  //输入时间的毫秒数
    let date = +new Date()    //系统时间的毫秒数
    if (birth - date > 0) {
        span.innerHTML = '生日不能超过系统时间'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '生日正确'
    span.style.color = 'green'
    return true
}

//8.验证移动电话 非空 符合电话号码规范
function validPhone() {
    let v = phone.value
    let span = phone.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '电话不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /^1[3456789]\d{9}$/
    if (reg.test(v) === false) {
        span.innerHTML = '非法的电话号码'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '电话号码正确'
    span.style.color = 'green'
    return true
}

//邮箱验证
function validEmail() {
    let v = email.value
    let span = email.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '邮箱不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]{2,}(\.com|\.cn|\.com\.cn|\.org|\.net|\.edu)$/
    if (reg.test(v) === false) {
        span.innerHTML = '非法的邮箱'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '邮箱正确'
    span.style.color = 'green'
    return true
}

//验证码验证
function validCode() {
    let v = reRandom.value
    let span = reRandom.nextElementSibling
    span.innerHTML = ''
    //使用图片码和输入字符进行对比验证，正确flag=true 不正确flag=flase
    let flag = verifyCode.validate(v)
    if (flag === false) {
        span.innerHTML = '验证码不正确'
        span.style.color = 'red'
        return flag
    }
    span.innerHTML = '验证码正确'
    span.style.color = 'green'
    return flag
}


//验证头像  图片类型 非空 <5kb
function validPic() {
    //如果没有上传文件 files=[] 空数组
    let files = pic.files  //原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath
    console.log(files);
    let span = pic.nextElementSibling
    span.innerHTML = ''
    if (!files || files.length === 0) {
        span.innerHTML = '必须上传文件'
        span.style.color = 'red'
        return false
    }
    //判断类型
    let reg = /^jpg|jpeg|png|bmp|webp|gif$/
    //获得后缀
    let type = files[0].type
    console.log(type);
    let index = type.indexOf('/')
    let suffix = type.substring(index + 1) //substring里一个下标数的话 截取会从包含此下标的数
    console.log(suffix);
    if (!reg.test(suffix)) {
        span.innerHTML = '请上传图片文件'
        span.style.color = 'red'
        return false
    }
    //获得图片的尺寸(byte) 1kb=1024byte
    let size = files[0].size
    let kb5 = 5 * 1024
    if (size > kb5) {
        span.innerHTML = '图片文件大小<=5KB'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '上传文件正确'
    span.style.color = 'green'
    return true
}



//验证个人评价
function validEvaluate() {
    let v = resume.value
    let span = resume.nextElementSibling
    if (!v || v.trim() === '') {
        span.innerHTML = '个人评价不能为空'
        span.style.color = 'red'
        return false
    }
    if (v.length > 200) {
        span.innerHTML = '个人评价不能超过200字'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '个人评价规格正确'
    span.style.color = 'green'
    return true

}

/**
 * 12、身份证验证 符合国标
 * @date 2020-10-08
 * @returns {any}
 */
function validID() {
    let v = identityNo.value
    let span = identityNo.nextElementSibling
    span.innerHTML = ''
    //1、验证空
    if (!v || v.trim() === '') {
        span.innerHTML = '身份证不能为空'
        span.style.color = 'red'
        return false
    }
    //2、验证长度
    if (v.length !== 18) {
        span.innerHTML = '身份证长度18位'
        span.style.color = 'red'
        return false
    }
    //3、前17位是否是数字 34012119980909123x
    let prefix = v.substring(0, v.length - 1)
    let reg = /^\d{17}$/
    if (reg.test(prefix) === false) {
        span.innerHTML = '身份证前17位必须是数字'
        span.style.color = 'red'
        return false
    }
    //4、验证区位码
    let arr = [
        '11',
        '12',
        '13',
        '14',
        '21',
        '22',
        '23',
        '21',
        '22',
        '23',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '41',
        '42',
        '43',
        '44',
        '45',
        '46',
        '50',
        '51',
        '52',
        '53',
        '54',
        '61',
        '62',
        '63',
        '64',
        '65',
        '81',
        '82',
        '83',
    ]
    //截取前两位
    let areaCode = v.substring(0, 2)
    if (arr.indexOf(areaCode) === -1) {
        span.innerHTML = '身份证前2位区位码不合法'
        span.style.color = 'red'
        return false
    }
    //5、验证年份 [1890-2020]
    let year = parseInt(v.substring(6, 10))
    let nowYear = new Date().getFullYear()
    if (year > nowYear || nowYear < 1890) {
        span.innerHTML = '身份证年份必须在[1890-' + nowYear + ']'
        span.style.color = 'red'
        return false
    }
    //6、验证月[1-12]
    return true
}

